<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>弹窗</title>
    <link href="../css/aui.css" rel="stylesheet" type="text/css">
    <link href="../css/index.css" rel="stylesheet" type="text/css">
    <style>
        html,
        body {
            background-color: rgba(0, 0, 0, 0);
            height: 100%;
        }

        .alert_content {
            position: fixed;
            top: 50%;
            left: 2rem;
            right: 2rem;
            height: auto;
            transform: translateY(-50%);
            background: #fff;
            z-index: 2;
            font-size: 0.9rem;
            text-align: center;
            border-radius: 0.4rem;
        }

        .alert_content .content {
            position: relative;
            padding: 0.75rem;
            font-size:14px;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:rgba(63,64,70,1);
            line-height:19px;
        }

        .alert_content .content:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            height: 1px;
            width: 100%;
            background: #eaeaea;
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
        }

        .alert_content .alert_btn {
            display: flex;
            height: 2.5rem;
            line-height: 2.5rem;
        }

        .alert_content .alert_btn p {
            flex: 1;
            font-size: 18px;
            position: relative;
        }

        .alert_content .alert_btn p:first-child:after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background: #eaeaea;
            transform: scaleX(0.5);
            -webkit-transform: scaleX(0.5);
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
        }
        .alert-title {
            padding-top: 20px;
            font-size:18px;
            font-family:PingFangSC-Medium,PingFang SC;
            font-weight:500;
            color:rgba(63,64,70,1);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div style="background-color: rgba(0, 0, 0, 0.4);width:100%;height:100%;position:fixed;top:0;left:0;z-index:1;"></div>
        <div class="alert_content">
            <p class="alert-title">提示</p>
            <p class="content" v-html="alertContent"></p>
            <div class="alert_btn" v-if="btns != 1">
                <p style="color:#7F818D;" tapmode onclick="fnBack()">{{cancelText}}</p>
                <p style="color:#5AC2FF;" tapmode onclick="fnConfirm()">{{confirmText}}</p>
            </div>
            <div class="alert_btn" v-else>
                <p style="color:#191919;" tapmode onclick="fnBack()">我知道了</p>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/service/service-app.js"></script>
<script type="text/javascript" src="../script/service/service-tool.js"></script>
<script type="text/javascript" src="../script/service/service-font.js"></script>
<script type="text/javascript" src="../script/service/service-user.js"></script>
<script type="text/javascript" src="../script/service/service-tabbar.js"></script>
<script type="text/javascript">
    var USER, $S;
    var vm, pageParam = {};
    var alertArr = [
        {
            "text": "请完善含<span style='color:#E25353;'>&nbsp;*&nbsp;</span>项内容哦！",
            "val": "0"
        }, {
            "text": "身份一旦确定，则后期无法修改，若激活码与身份不符将导致无法成功激活课本，请谨慎选择。",
            "val": "1"
        }, {
            "text": "确认退出登录？",
            "val": "2"
        }, {
            "text": "未报名用户，可免费试听2分钟",
            "val": "3"
        },
        {
            "text": "确定取消收藏吗?",
            "val": "4"
        },
        {
            "text": "确认删除该卡拉OK吗?",
            "val": "5"
        },
        {
            "text": "确认退出该班级吗?",
            "val": "6"
        },
        {
            "text": "确认解散该班级吗?",
            "val": "7"
        },
        {
            "text": "确认要清空班级公告吗?",
            "val": "8"
        },
        {
            "text": "确认删除该公告吗?",
            "val": "9"
        },
        {
            "text": "确认移除该学生吗?",
            "val": "10"
        },
        {
            "text": "确认删除该评论吗?",
            "val": "11"
        },
        {
            "text": "确认要取消该订单吗?",
            "val": "12"
        },
        {
            "text": "确认已收货?",
            "val": "13"
        },
        {
            "text": "确认要删除该订单吗?",
            "val": "14"
        },
        {
            "text": "确认要取消申请?",
            "val": "15"
        },
        {
            "text": "修改学校会清空您的班级，请谨慎操作",
            "val": "16"
        },
        {
            "text": "确认取消绑定微信?",
            "val": "17"
        },
        {
            "text": "确认清除缓存?",
            "val": "18"
        },
        {
            "text": "修改学校地址后需要重新选择学校",
            "val": "19"
        },
        {
            "text": "修改学校会自动退出您所在的班级, 请谨慎操作",
            "val": "20"
        },
        {
            "text": "是否保存本次录音",
            "val": "21"
        },
        {
            "text": "开始前请连接耳麦，以保证录音质量。",
            "val": "22"
        },
        {
            "text": "当前非wifi环境,是否继续播放",
            "val": "23"
        },
        {
            "text": "请确认是否登录教师端管理后台",
            "val": "24"
        },
        {
            "text": "确认已收货?",
            "val": "25"
        },
        {
            "text": "确认删除该课件?",
            "val": "26"
        },
        {
            "text": "确认注销账号吗?",
            "val": "27"
        }
    ];
    apiready = function() {
        USER = USER();
        $S = SERVICE();
        pageParam = api.pageParam;
        fnInit();
    }

    function fnInit() {
        pageParam.cancelText = pageParam.cancelText || '取消';
        pageParam.confirmText = pageParam.confirmText || '确认';
        pageParam.alertType = pageParam.alertType || 0;
        pageParam.alertContent = alertArr[pageParam.alertType].text;
        pageParam.btns = pageParam.btns || 2;
        vm = new Vue({
            el: ".vueApp",
            data: pageParam
        });
    }
    //提交
    var isClick = true;

    function fnConfirm() {
        if (isClick) {
            isClick = false;
            if (vm.alertConfirmFn) {
                var func = vm.alertConfirmFn;
                if(vm.alertConfirmFn.indexOf('(') == -1) {
                    func += '()';
                }
                api.execScript({
                    name: vm.winName,
                    frameName: vm.frameName,
                    script: func
                });
            }
            api.closeFrame();
        }
    }

    function fnBack() {
        if (vm.cancelFn) {
            api.execScript({
                name: vm.winName,
                frameName: vm.frameName,
                script: vm.cancelFn
            });
        } else {
            api.closeFrame();
        }
    }
</script>

</html>
